/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/Filter/button.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

import { t } from '@src/locales'

export type FilterButtonProps = {
  // 筛选项数量
  count: number;
}

export interface FilterButtonSetupState {
  
}

export enum FilterButtonEmitEventNameEnum {
  Input = 'input',
  Close = 'close',
}

export type FilterButtonInstance = ComponentInstance & FilterButtonSetupState
export type FilterButtonVM = ComponentRenderProxy<FilterButtonProps> & CommonComponentInstance & FilterButtonInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserFilterButton,
  emits: [
    FilterButtonEmitEventNameEnum.Input,
    FilterButtonEmitEventNameEnum.Close,
  ],
  props: {
    count: {
      type: Number as PropType<number>,
      default: 0
    }
  },
  setup(props: FilterButtonProps, { emit }) {
    
    const isFilterCountEmpty = computed(() => {
      return Number(props.count) === 0
    })
    
    const onCloseHandler = (event: Event) => {
      event.stopPropagation()
      emit(FilterButtonEmitEventNameEnum.Close)
    }
    
    return {
      isFilterCountEmpty,
      onCloseHandler
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserFilterButton}>
        
        {this.isFilterCountEmpty ? (
          
          <div class="base-select-user-filter-button__unselected">
            <i class="iconfont icon-filter"></i>
            <span class="base-select-user-filter-button__text">
              {t('common.base.filter')}
            </span>
          </div>
          
        ) : (
          
          <div class="base-select-user-filter-button__selected">
            
            <i class="iconfont icon-filter"></i>
            
            <span class="base-select-user-filter-button__text">
              {t('common.base.filterCount', { count: this.count })}
            </span>
            
            <i 
              class="iconfont icon-yemianshanchu base-select-user-filter-button__selected-close"
              onClick={this.onCloseHandler}
            >
            </i>
            
          </div>
          
        )}
        
      </div>
    )
  }
})
